<template>
  <div class="pd-20 detectionItem">
    <el-input v-model="params.search"
              placeholder="请输入主题名称"
              class="w-200"
              clearable
              @clear="handleQuery"></el-input>
    <el-select v-model="params.searchTwo"
               placeholder="请选择关联权益"
               filterable
               remote
               reserve-keyword
               clearable
               @clear="handleQuery"
               :remote-method="remoteMethod"
               :loading="loading1"
               class="w-200"
               @change="handleSelect">
      <el-option v-for="item in interestsFilterList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleOption(null, 'add')">新 增</el-button>
    <element-table :columns="columns"
                   class="mt-20"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:type="{row}">
        <el-tag type="danger"
                v-if="row.type === 1">专病主题</el-tag>
        <el-tag type="success"
                v-if="row.type === 2">特色专项主题</el-tag>
      </template>
      <template v-slot:status="{row}">
        <el-tag type="success"
                v-if="row.status === 0">未开始</el-tag>
        <el-tag type="danger"
                v-if="row.status === 1">活动中</el-tag>
        <el-tag type="danger"
                v-if="row.status === 2">活动结束</el-tag>
      </template>
      <template v-slot:edit="{row}">

        <el-button type="primary"
                   @click="handleOption(row, 'edit')">编 辑</el-button>
        <el-button type="danger"
                   v-if="row.status === 0 || row.status === 2"
                   @click="handleOption(row, 'del')">删 除</el-button>
        <!-- <el-button type="primary"
                   @click="handleOption(row, 'count')">统计查看</el-button> -->
        <!-- <el-button type="primary"
                   v-if="row.status === 2"
                   @click="handleOption(row, 'detail')">查看详情</el-button> -->
        <!--  <el-button type="danger"
                   v-if="row.noticeStatus === '1' && row.appointmentId > 0"
                   @click="handleOption(row, 'appointment')">推 送</el-button> -->
      </template>
    </element-table>
    <statistics-dialog :dataObj="dataObj"
                       v-if="isShow"
                       :visible.sync="isShow"></statistics-dialog>
    <theme-dialog :dataThemeObj="dataThemeObj"
                  v-if="isShowTheme"
                  :visible.sync="isShowTheme"></theme-dialog>
  </div>

</template>
<script>
  import elementTable from '@/base/ElementTable'
  import statisticsDialog from './statisticsDialog'
  import themeDialog from './themeDialog'
  export default {
    name: 'themeTask', // 主题任务发布
    data () {
      return {
        loading: false,
        loading1: false,
        isShow: false,
        isShowTheme: false,
        columns: [
          {
            label: '活动名称',
            prop: 'name',
          },
          {
            label: '关联主题',
            prop: 'activityName',
          },
          {
            label: '类型',
            prop: 'type',
            isSlot: true,
            width: 150
          },
          {
            label: '参与药厂数量',
            prop: 'factoryNum',
            width: 100
          },
          {
            label: '参与药品数量',
            prop: 'drugNum',
            width: 100
          },
          {
            label: '关联权益方案',
            prop: 'inviolableName',
          },
          {
            label: '参与门店数',
            prop: 'hospitalNum',
            width: 100
          },
          {
            label: '发布时间',
            prop: 'createTime',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '开始时间',
            prop: 'beginTime',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.beginTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '结束时间',
            prop: 'finishTime',
            width: 150,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.finishTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '主题状态',
            prop: 'status',
            width: 120,
            align: 'center',
            isSlot: true
          },
          {
            label: '操作',
            prop: 'edit',
            width: 280,
            align: 'center',
            isSlot: true
          }
        ],
        tableData: [],
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        dataObj: {},
        dataThemeObj: {},
        // 关联权益
        interestsList: [],
        interestsFilterList: [],
        params: {
          search: '', // 主题名称
          searchTwo: '', // 关联权益
        }
      }
    },
    methods: {
      handleQuery() {
        this.pageIndex=1
        this.getList()
      },
      getList () {
        this.post(this.api.promote.activityList, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          type: 1,
          ...this.params
        }).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object.filter(item => item.type === 1);
            this.pageTotal = res.data.totalNum;
          }
        })

      },

      remoteMethod (query) {
        if (query !== '') {
          let _this = this;
          this.post(this.api.promote.inviolableList, {
            search: this.params.searchTwo,
            pageIndex: this.pageIndex - 1,
            pageSize: this.pageSize,
          }).then(res => {
            if (res.data.code === '200') {
              _this.loading1 = false;
              _this.interestsList = res.data.object;
            }
          })

          /**
           * 搜索内容渲染到下拉框
           * 从 this.dataList1 把数据赋值到 this.options1
           * 只有这样才能起作用
           */
          setTimeout(() => {
            _this.loading1 = false;
            _this.interestsFilterList = _this.interestsList.filter(item => item.name.indexOf(query) > -1);
          }, 200);

        } else {
          this.interestsFilterList = [];
        }
      },
      handleSelect (item) {
        let obj = this.interestsFilterList.find(el => el.id == item);
        this.params.searchTwo = obj.name;
      },
      handleOption (row, op) {
        switch (op) {
          case 'add':
            this.isShowTheme = true;
            this.dataThemeObj = null;
            break;
          case 'edit':
            this.isShowTheme = true;
            this.dataThemeObj = Object.assign({ isDetail: false }, row);
            break;
          case 'detail':
            this.isShowTheme = true;
            this.dataThemeObj = Object.assign({ isDetail: true }, row);
            break;
          case 'count':
            this.isShow = true;
            this.dataObj = Object.assign({}, row);
            break;
          case 'del':
            this.$confirm('您是否要删除该主题？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.delActivity, {
                  id: row.id
                })
                if (res.code === '200') {
                  this.$message.success('删除成功!');
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
          case 'appointment':
            this.$confirm('您是否要推送消息？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.promote.appointmentBeforeNotify, {
                  id: row.id
                })
                if (res.code === '200') {
                  this.$message.success('推送成功!');
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
        }
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': elementTable,
      'statistics-dialog': statisticsDialog,
      'theme-dialog': themeDialog
    }
  }
</script>
<style scoped lang="scss">
</style>
